<template>
    <view>
        <!-- parse <template is="calendarIndexTpl" :data="skin,day,hasDays,isLoad,list"/> -->
        <block name="calendarIndexTpl">
            <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
            <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

            <view :class="'main ' + (skin.IS_SUB ? 'sub-margin-bottom' : '')" v-if="isLoad">
                <view class="plan-date">
                    <cmpt-calendar mode="one" :hasDays="hasDays" @click="bindClickCmpt" @monthChange="bindMonthChangeCmpt" />
                </view>

                <view class="list padding-project">
                    <view v-if="list === null" class="load loading text-l text-grey"></view>
                    <text v-else-if="list.length == 0" class="no-project icon-emoji text-l text-grey">本日没有可预约的项目哦~</text>
                    <view class="item card-project shadow-project" @tap="url" :data-url="'../../meet/detail/meet_detail?id=' + item._id" v-for="(item, index) in list" :key="index">
                        <view v-if="index % 4 == 0" class="left bg-blue"></view>

                        <view v-else-if="index % 4 == 1" class="left bg-green"></view>

                        <view v-else-if="index % 4 == 2" class="left bg-orange"></view>

                        <view v-else class="left bg-cyan"></view>

                        <block v-if="item.pic">
                            <image class="img loading" :src="item.pic" :lazy-load="true" mode="aspectFill" />
                        </block>

                        <view class="title text-cut">{{ item.title }}</view>

                        <view class="time">
                            <text class="icon-time margin-right-xxs"></text>
                            {{ item.timeDesc }}
                        </view>
                    </view>
                </view>
            </view>

            <block v-if="skin.IS_SUB">
                <template is="menuTpl" :data="skin,curMenu:'calendar_index'" />
            </block>
        </block>
    </view>
</template>

<script>
import cmptCalendar from '../../../../../cmpts/public/calendar/calendar_comm/calendar_comm_cmpt';
let behavior = require('../../../../behavior/calendar_index_bh.js');
let PassortBiz = require('../../../../biz/passport_biz.js');
let skin = require('../../skin/skin.js');
export default {
    components: {
        cmptCalendar
    },
    data() {
        return {
            isLoad: '',

            skin: {
                IS_SUB: false
            },

            hasDays: [],
            list: ''
        };
    },
    mixins: [behavior],
    onReady: function () {
        PassortBiz.initPage({
            skin,
            that: this,
            isLoadSkin: true,
            tabIndex: 1
        });
    },
    methods: {
        bindClickCmpt() {
            console.log('占位：函数 bindClickCmpt 未声明');
        },

        bindMonthChangeCmpt() {
            console.log('占位：函数 bindMonthChangeCmpt 未声明');
        },

        url() {
            console.log('占位：函数 url 未声明');
        }
    }
};
</script>
<style>
@import './calendar_index.css';
@import 'undefined';
</style>
